<template><div>
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Carousel</h1>
                        <small>A slide show component for cycling through element-images or slides of text-like a carousel. Nested carousels are not supported.</small>

                        <div class="actions">
                            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                            <a href="" class="actions__item zmdi zmdi-check-all"></a>

                            <div class="dropdown actions__item">
                                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Manage Widgets</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>
                    </header>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Slides only</h2>
                            <small class="card-subtitle">Here&#39;s a carousel with slides only.</small>
                        </div>

                        <div class="card-block">
                            <div class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner" role="listbox">
                                    <div class="carousel-item active">
                                        <img src="/static/demo/img/carousel/c-1.jpg" alt="First slide"/>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="/static/demo/img/carousel/c-2.jpg" alt="Second slide"/>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="/static/demo/img/carousel/c-3.jpg" alt="Third slide"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">With controls</h2>
                            <small class="card-subtitle">Adding in the previous and next controls:</small>
                        </div>

                        <div class="card-block">
                            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner" role="listbox">
                                    <div class="carousel-item active">
                                        <img src="/static/demo/img/carousel/c-1.jpg" alt="First slide"/>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="/static/demo/img/carousel/c-2.jpg" alt="Second slide"/>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="/static/demo/img/carousel/c-3.jpg" alt="Third slide"/>
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">With indicators</h2>
                            <small class="card-subtitle">You can also add the indicators to the carousel, alongside the controls, too.</small>
                        </div>

                        <div class="card-block">
                            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                                </ol>

                                <div class="carousel-inner" role="listbox">
                                    <div class="carousel-item active">
                                        <img src="/static/demo/img/carousel/c-1.jpg" alt="First slide"/>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="/static/demo/img/carousel/c-2.jpg" alt="Second slide"/>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="/static/demo/img/carousel/c-3.jpg" alt="Third slide"/>
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">With captions</h2>
                            <small class="card-subtitle">Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.carousel-item.</code> </small>
                        </div>

                        <div class="card-block">
                            <div id="carouselExampleCaption" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                    <li data-target="#carouselExampleCaption" data-slide-to="0" class="active"></li>
                                    <li data-target="#carouselExampleCaption" data-slide-to="1"></li>
                                    <li data-target="#carouselExampleCaption" data-slide-to="2"></li>
                                </ol>

                                <div class="carousel-inner" role="listbox">
                                    <div class="carousel-item active">
                                        <img src="/static/demo/img/carousel/c-1.jpg" alt="First slide"/>
                                        <div class="carousel-caption">
                                            <h3>First slide label</h3>
                                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="/static/demo/img/carousel/c-2.jpg" alt="Second slide"/>
                                        <div class="carousel-caption">
                                            <h3>Second slide label</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="/static/demo/img/carousel/c-3.jpg" alt="Third slide"/>
                                        <div class="carousel-caption">
                                            <h3>Third slide label</h3>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                                        </div>
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleCaption" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleCaption" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                
            </div></template>